import {
  Swiper,
  SwiperItem,
  View,
  Text,
  Image,
  Picker,
} from "@tarojs/components";
import ico_jiantou_one from "@/assets/image/ico_jiantou_one.svg";
import ico_list_map from "@/assets/image/ico_list_map.svg";

import ico_phone from "@/assets/image/ico_phone.svg";
import "./index.scss";
import clsx from "clsx";
import { useEffect, useRef, useState } from "react";
import {
  addCounts,
  getAddressArr,
  getLevelImage,
  getLevelName,
  linkWithParams,
  makePhoneCall,
} from "@/helper/utils";
import { routes } from "@/constants/routes";
import { classifyDetail, getTool } from "@/services/entities/all";
import { useRouter } from "@tarojs/taro";
import Taro from "@tarojs/taro";
import * as qqMap from "@/helper/jssdk/qqmap-wx-jssdk.js";
import { AtNoticebar } from "taro-ui";
import { useShareTimeline } from "@tarojs/taro";
import { useShareAppMessage } from "@tarojs/taro";
import { getGlobalData, setGlobalData } from "@/global_data";
const ToolPage = () => {
  const router = useRouter();
  const { params } = router;
  let { id, title } = params;
  const tabs = [{ name: "综合排序" }, { name: "离我最近" }];
  const localRef = useRef("");
  const [list, setList] = useState<any>();
  const [city, setCity] = useState<any>("");
  const [address, setAddress] = useState<any>([]);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [banner, setBanner] = useState<any>();
  let scene = getGlobalData("scene");
  if (scene && scene.id) {
    id = scene.id;
    setGlobalData("scene", "");
  }
  useEffect(() => {
    if (id) {
      // 这里city传中文
      getTool({ classifyIf: id, area: city }).then((res) => {
        setList(res);
      });
    }
  }, [id, city]);

  useEffect(() => {
    Taro.getFuzzyLocation({
      success: (res) => {
        const map: any = new qqMap({
          key: "HY5BZ-24PLW-N7ARO-OLTQS-M4LE6-CIBRX",
        });
        map.reverseGeocoder({
          location: {
            latitude: res.latitude,
            longitude: res.longitude,
          },
          success: (addressRes: any) => {
            const addressArr = getAddressArr(addressRes?.result?.address);
            if (addressArr[2]) {
              localRef.current = addressArr[2];
            }
          },
        });
      },
    });
    classifyDetail({ id }).then((res: any) => {
      setBanner(res.addClassifyStoreList);
    });
    Taro.setNavigationBarTitle({ title: title ?? "二级分类" });
  }, []);

  useShareAppMessage(() => ({
    title: title,
    path: `/pages/init/index?route=ROUTES_TOOL&action=redirect&id=${id}`,
  }));

  useShareTimeline(() => ({
    title: title,
    query: `id=${id}`,
  }));

  return (
    <View className="tool-container bg-page">
      <Swiper
        className="mt-16 swiper"
        indicatorColor="#999"
        indicatorActiveColor="#333"
        circular
        indicatorDots
        autoplay
      >
        {banner?.map((item) => {
          return (
            <SwiperItem key={item.id}>
              <Image
                className="banner-img"
                onClick={() => {
                  linkWithParams(routes.ROUTES_SHOP_DETAIL, {
                    storeId: item.storeId,
                  });
                }}
                src={item.imageUrl}
              />
            </SwiperItem>
          );
        })}
      </Swiper>
      <View className="flex-column pd-24 border-box">
        <View className="dis-flex align-center mg-tb-32">
          {currentIndex === 0 ? (
            <Picker
              mode="region"
              value={address}
              onChange={(e) => {
                setAddress(e.detail.value);
                setCity(e.detail.value[2]);
              }}
            >
              <View className="dis-flex align-center city">
                <Text className="fs-28 lh-38 cl-black">
                  {address?.length ? address[2] : "选择城市"}
                </Text>
                <Image src={ico_jiantou_one} className="city-img img-40" />
              </View>
            </Picker>
          ) : (
            <View className="city"></View>
          )}
          <View className="dis-flex align-center br-32 bg-007DDB pd-4 border-box ml-12">
            {tabs.map((item, index) => {
              return (
                <View
                  onClick={() => {
                    setCurrentIndex(index);
                    if (index === 0) {
                      setCity(address[2]);
                    }
                    if (index === 1) {
                      setCity(localRef.current);
                    }
                  }}
                  key={index}
                  className={clsx(
                    "pd-tb-10 pd-lr-40 border-box br-28 fs-26 lh-36 cl-white",
                    currentIndex == index ? "bg-ffffff cl-black" : ""
                  )}
                >
                  {item.name}
                </View>
              );
            })}
          </View>
        </View>
        {list?.map((item, index) => {
          return (
            <View
              key={index}
              className="mb-16 bg-ffffff dis-flex br-8 pd-24 pl-16 border-box"
            >
              <View
                className="flex-column left align-center"
                onClick={() => {
                  linkWithParams(routes.ROUTES_SHOP_DETAIL, {
                    storeId: item.id,
                  });
                }}
              >
                <Image src={getLevelImage(item.level)} className="img-80" />
                <View className="bg-4EBE6F br-16 pd-lr-20 fs-20 lh-32 cl-white mt-40">
                  {getLevelName(item.level)}
                </View>
                <View class="dis-flex align-center mt-20">
                  <Image src={ico_list_map} className="img-24" />
                  <Text className="flex-1 fs-28 cl-blue">
                    {item.city?.length < 5
                      ? item.city
                      : `${item.city?.substring(0, 4)}...`}
                  </Text>
                </View>
              </View>
              <View className="flex-column flex-5 ml-30 flex-1 overflow-hidden">
                <Text
                  className="fs-32 lh-42 cl-black"
                  onClick={() => {
                    linkWithParams(routes.ROUTES_SHOP_DETAIL, {
                      storeId: item.id,
                    });
                  }}
                >
                  {item.name}
                </Text>
                <Text
                  className="mt-24 fs-24 lh-32 cl-black flex-1 text-overflow"
                  onClick={() => {
                    linkWithParams(routes.ROUTES_SHOP_DETAIL, {
                      storeId: item.id,
                    });
                  }}
                >
                  经营范围：{item.shopScope}
                </Text>
                <View className="dis-flex align-center justify-between mt-10">
                  <Text
                    className="cl-8C8C8C fs-24 lh-32 flex-1 text-overflow"
                    onClick={() => {
                      linkWithParams(routes.ROUTES_SHOP_DETAIL, {
                        storeId: item.id,
                      });
                    }}
                  >
                    地址：{item.address}
                  </Text>
                  <Image
                    src={ico_phone}
                    className="img-62"
                    onClick={() => {
                      addCounts(item.id);
                      makePhoneCall(item.phone);
                    }}
                  />
                </View>
                <View className="width-100 mt-10">
                  <AtNoticebar
                    marquee={true}
                    className="banner-text-bg"
                    speed={50}
                  >
                    {item.contentDetail}
                  </AtNoticebar>
                </View>
              </View>
            </View>
          );
        })}
      </View>
    </View>
  );
};

export default ToolPage;
